02. Sass Nesting

Nesting is one of the key features of Sass. HTML elements are nested, and so CSS is nested by nature, but that isn't reflected in CSS syntax. Sass allows you to write styles for nested elements in a much more intuitive way. Writing nested sass can mean that you don't have to create nearly as many individual classes, which can save a lot of time and markup. Not only that, but you are much more likely to be able to edit styles by only touching the CSS file, without having to go back and forth between the HTML and CSS. As a rule of thumb though, if you find yourself nesting more than three levels deep, it’s probably time for a new class.

Take a look at these examples of nesting:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

The code above, when translated to css, would become:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

I chose this feature as one of the core things to know about sass because it is probably the single feature that most impacts your ability to write compact and efficient styles.

In this lesson (and the next), if you want to work on your local machine, you should fork and clone this repo. Otherwise, we have once again provided in-classroom workspaces for you to use.

Currently all of the files in our github app are CSS file format - except the Sass resets file that I have provided for you. Now, you should translate all the remaining files from CSS to Sass.

HINT - The least effort you could put out to complete this step would be to change all the file names to .scss and leave the content all the same. CSS is valid Sass!

Quiz: Sass vs. CSS

What css would be generated by the following sass code?

section.hero {
    width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
         background-image: url('mybg.jpeg');
         background-size: cover;
    }

    h1, h3 {
         font-family: 'cool font', sans-serif;
    }
}

Option 1

section.hero {
   width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.hero img {
    background-image: url('mybg.jpeg');
    background-size: cover;
}

section.hero img h1,  section.hero img h3 {
    font-family: 'cool font', sans-serif;
}

Option 2

section.hero {
   width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

img section.hero {
    background-image: url('mybg.jpeg');
    background-size: cover;
}

section.hero h1,  h3 {
    font-family: 'cool font', sans-serif;
}

Option 3

section.hero {
   width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.hero img  {
    background-image: url('mybg.jpeg');
    background-size: cover;
}

section.hero h1,  h3 {
    font-family: 'cool font', sans-serif;
}

Option 4

section.hero {
   width: 100vw;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.hero img  {
    background-image: url('mybg.jpeg');
    background-size: cover;
}

section.hero h1,  section.hero h3 {
    font-family: 'cool font', sans-serif;
}

QUESTION:

Interview Question

Explain sass nesting syntax and its advantages over vanilla css.